<template>
  <div class="article-ranking-container">
    <el-card class='header'>
      <div class='dynamic-box'>
        <span class='title'>{{ $t('msg.article.dynamicTitle') }}</span>
        <el-checkbox-group v-model='selectDynamicLabel'>
          <el-checkbox
            v-for='(item, index) in dynamicData'
            :label='item.label'
            :key='index'
          >{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </el-card>
    <el-card>
      <el-table
        ref='tableRef'
        :data='tableData'
        border
        style='height: 600px'
      >
        <el-table-column
          v-for='(item, index) in tableColumns'
          :key='index'
          :prop='item.prop'
          :label='item.label'
        >
          <template
            v-if='item.prop === "publicDate"'
            #default="{row}"
          >
            {{ $filters.relativeTime(row.publicDate) }}
          </template>
          <template
            v-else-if='item.prop === "action"'
            #default="{row}"
          >
            <el-button type="primary" size="small" @click="onShowClick(row)">{{
                $t('msg.article.show')
              }}</el-button>
            <el-button type="danger" size="small" @click="onRemoveClick(row)">{{
                $t('msg.article.remove')
              }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class='pagination'
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
        :current-page='page'
        :page-sizes='[10, 20, 30, 40]'
        :page-size='size'
        layout='total, sizes, prev, pager, next, jumper'
        :total='total'
      ></el-pagination>
    </el-card>
  </div>
</template>

<script setup>
import { onActivated, ref, onMounted } from 'vue'
import { getArticleList, deleteArticle } from '@/api/article'
import { watchSwitchLang } from '@/utils/i18n'
import { dynamicData, selectDynamicLabel, tableColumns } from './dynamic'
import { tableRef, initSortable } from '@/views/article-ranking/sortable'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'

// 数据相关
const tableData = ref([])
const page = ref(1)
const size = ref(10)
const total = ref(0)
const getListData = async () => {
  const result = await getArticleList({
    page: page.value,
    size: size.value
  })
  tableData.value = result.list
  total.value = result.total
}
getListData()
watchSwitchLang(getListData)
onActivated(getListData)

// 初始化 sortable
onMounted(() => {
  initSortable(tableData, getListData)
})

// size改变
const handleSizeChange = (val) => {
  size.value = val
  getListData()
}
// page改变
const handleCurrentChange = (val) => {
  page.value = val
  getListData()
}

// 点击查看
const router = useRouter()
const onShowClick = (row) => {
  router.push(`/article/${row._id}`)
}
// 点击删除
const i18n = useI18n()
const onRemoveClick = (row) => {
  ElMessageBox.confirm(
    i18n.t('msg.article.dialogTitle1') +
    row.title +
    i18n.t('msg.article.dialogTitle2'),
    {
      type: 'warning'
    }
  ).then(async () => {
    deleteArticle(row._id)
    ElMessage.success(i18n.t('msg.article.removeSuccess'))
    getListData()
  })
}
</script>

<style lang="scss" scoped>
.article-ranking-container {
  .header {
    margin-bottom: 20px;
    .dynamic-box {
      display: flex;
      align-items: center;
      .title {
        margin-right: 20px;
        font-size: 14px;
        font-weight: bold;
      }
    }
  }

  ::v-deep .el-table__row {
    cursor: pointer;
  }

  .pagination {
    margin-top: 20px;
    text-align: center;
  }
}

::v-deep .sortable-ghost {
  opacity: 0.6;
  color: #fff !important;
  background: #304156 !important;
}
</style>
